<template>
    <div class="main-box">
      <van-row class="head-box">
        <strong>{{vote.voteName}}</strong>
      </van-row>
      <van-row class="content-box">
        <van-col class="tips-box">
          <img src="@/assets/images/time.png" class="pic">
        </van-col>
        <van-col class="count-down">
          <strong>{{vote.msg}}</strong>
          <!-- <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /> -->
        </van-col>
          <van-button type="default" class="button" @click="getVoteInfo">重新进入</van-button>
      </van-row>
    </div>
  </template>
  <script>
  export default {
    name: "main-box",
    data() {
      return {
        title: '',
        time: 30 * 60 * 60 * 1000,
        vote: this.$route.params.vote
      }
    },
    methods: {
      checkVote(){
        let currDate = new Date();
        if(!this.vote.isPush || this.vote.beginTime>currDate){
          this.vote.msg = "投票未开始"
        }
        else if(this.vote.endTime<currDate){
          this.vote.msg = "投票已结束"
        }else{
          this.vote.msg = '';
        }
      },
      getVoteInfo(){
        this.$axios.vote.voteInfo({data:this.vote.data}).then((res) => {
          let data = this.vote.data ;
          this.vote = res.data.data;
          this.vote.data = data;
          this.checkVote();
          if(this.vote.msg!=''){
            return;
          }
          this.$router.push({
              name: "home",
              params: { data: data },
          });
        });
      }
    },
    computed: {
    },
    created() {
      this.checkVote();
    },
  };
  </script>
  <style lang="scss">
  .main-box{
    background-color: #e5f2ff !important;
  }
  .head-box{
    background-color: transparent !important;
    background-image: url('../assets/images/head-bg-1.png');
    background-repeat: no-repeat;
    background-position: center -2.5rem;
    margin: 0 auto;
    height: 34.25vh;
    background-size: 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    strong{
      color: rgba(255, 255, 255, .8);
      // font-weight: 700;
      font-size: 2.5rem;
      margin-top: 2.5rem;
    }
    .pic{
      width: 5rem;
      height: 5rem;
      margin-top: 1.25rem;
    }
  }
  .content-box{
    background-color: #FFF;
    box-shadow: 0 0 5px -4px #000;
    border-radius: 0.625rem;
    min-height: 18.75rem;
    margin-top: -5rem !important;
    margin: -5rem 1.875rem 0 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tips-box{
      width: 8.75rem;
      height: 8.75rem;
      border-radius: 50%;
			box-shadow: 0 5px 5px -4px #000;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -3.125rem;
      background-color: #FFF;
      font-size: $wdr-oneTitle-fontSize;
      font-weight: 700;
      color: $wdr-main-color;
      .pic{
        width: 6rem;
        height: 6rem;
      }
    }
    .count-down{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      strong{
        font-size: $wdr-oneTitle-fontSize;
        font-weight: 700;
        margin: 1.875rem 0 0.625rem 0;
        color: red;
      }
      .van-count-down{
        font-size: $wdr-threeTitle-fontSize;
        color: #999;
      }
    }
  }
  </style>